<template>
  <view class="container" @click="change" :class="item.checked ? 'selected' : ''">
    <view class="container_header">
      <view class="container_header_name">{{ item.name }}</view>
      <view class="container_header_distance">距离{{ item.distance ? item.distance.toFixed(2) : '' }}公里</view>
    </view>
    <view class="container_footer">
      <uni-icons type="location-filled" size="18" color="#26BB55"></uni-icons>
      <view class="container_footer_address">{{ item.address }} </view>
      <view class="container_footer_fly">
        <!-- <uni-icons type="paperplane" size="26"></uni-icons> -->
        <image src="/static/image/loca_fly_icon.png" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'goodsCard',

  props: {
    item: {
      type: Object,
      default: {},
    },

    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    change() {
      this.$emit('change', this.index)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  border-radius: 10rpx;
  background: rgba(248, 248, 248, 1);
  margin: 20rpx 0;
  padding: 20rpx 10rpx;
  &_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_name {
      font-size: 32rpx;
      font-weight: bold;
    }
    &_distance {
      font-size: 24rpx;
    }
  }
  &_footer {
    display: flex;
    align-items: first baseline;
    margin-top: 20rpx;
    &_address {
      flex: 1;
      color: #999999;
      font-size: 26rpx;
    }
    &_fly {
      /* border-radius: 50%;
      padding: 10rpx;
      background-color: white;
      display: flex;
      align-self: center;
      align-items: center;
      border: 1rpx solid rgba(217, 217, 217, 1); */
      width: 70rpx;
      height: 70rpx;
    }
  }
}
.selected {
  border: 1px solid rgba(49, 194, 94, 1);
  background: linear-gradient(180deg, rgba(228, 250, 234, 1), rgba(245, 252, 247, 1) 100%);
}
</style>
